<template>
	<view id="app">
		<view class="container">
			<view class="f1 df br30 bgw bd1s brccd ">
				<view class="df aic w130 pr10 pl20 mtb10 br1s brc9" @click="handle('location')">
					<view class="f1 f28 c000">{{location.text}}</view>
					<view class="w30">
						<uv-icon name="arrow-down" size="24rpx"></uv-icon>
					</view>
				</view>
				<view class="f1 df" @click="handle('search')">
					<view class="f1 df pl15">
						<uv-icon name="search" size="40rpx"></uv-icon>
						<view class="f28 c999 mtb10">点我搜索</view>
					</view>
					<view class="w120 bginfo cw br30 plr20 ptb10 df aic jcc">搜索</view>
				</view>
			</view>
			<view class="df aic w60 pl20 jcc" @click="handle('msg')">
				<uv-icon name="chat" size="56rpx"></uv-icon>
			</view>
		</view>
		<view class="container">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="1500" indicator-active-color="#145cfe" indicator-color="#aaa"
							duration="500">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-item">
						<image :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container">
			<uv-row>
				<uv-col span="3" v-for="(item,index) in navItem" :key="index">
					<view class="ver jcc w180">
						<view class="wh80">
							<image :src="item.url"></image>
						</view>
						<view class="f32 fw4 h50">{{item.title}}</view>
					</view>
				</uv-col>
			</uv-row>
		</view>
		<view class="container">
			<view class="bgw ver ptb20 plr10 w100p">
				<view class="f30 fw4 mb20">全程保障 ● 放心购买 ● 服务无忧</view>
				<view class="df ais jcl">
					<view class="f1 c666 f24 df w160 aic">
						<view>
						<uv-icon name="checkmark-circle" color="#646466" size="24rpx"></uv-icon>
						</view>
						<view>专业级培训</view>
					</view>
					<view class="f1 c666 f24 df w160 aic">
						<view>
						<uv-icon name="checkmark-circle" color="#646466" size="24rpx"></uv-icon>
						</view>
						<view>安全有规范</view>
					</view>
					<view class="f1 c666 f24 df w160 aic">
						<view>
						<uv-icon name="checkmark-circle" color="#646466" size="24rpx"></uv-icon>
						</view>
						<view>服务有规范</view>
					</view>
					<view class="f1 c666 f24 df w160 aic">
						<view>
						<uv-icon name="checkmark-circle" color="#646466" size="24rpx"></uv-icon>
						</view>
						<view>售后有保障</view>
					</view>
				</view>	
			</view>
		</view>
		<view class="container">
			<view class="adv-con">
				<view class="adv-left">
					<image :src="adv2.sc"></image>
				</view>
				<view class="adv-right">
					<view class="adv-top">
						<image :src="adv2.join"></image>
					</view>
					<view class="adv-bottom">
						<image :src="adv2.bz"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="df aic jcsb w100p">
				<view class="f36 fw5 tac pr">
					<view class="border"></view>
					<view class="txt">实操训练营</view>
				</view>
				<view class="df w110 bd1s brc9 c666 br30  aic jcc f26" click="handletrain">更多</view>
			</view>
		</view>
		<view class="container">
			<swiper class="train-swiper" circular :indicator-dots="true" :autoplay="true" interval="1500" indicator-active-color="#145cfe" indicator-color="#aaa"
							duration="500">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-item">
						<image :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container adv">
			<image :src="list[0].url"></image>
		</view>
		<view class="container">
			<view class="df aic jcsb w100p">
				<view class="f36 fw5 tac pr">
					<view class="border"></view>
					<view class="txt">线上课程</view>
				</view>
				<view class="f1 df  c99 f30 pr15 jcr aie c666"><view>海量课程等你看</view></view>
				<view class="df w110 bd1s brc9 c666 br30  aic jcc f26" click="handlecourse">更多</view>
			</view>
		</view>
		<view class="container fdc">
			<view class="bgw df ptb20 plr15" click="handlecourse(1)">
				<view class="w300 h180 br30 courseImg"><image :src="courseimg"></image></view>
				<view class="f1 ml15">
					<view class="f28 fw4 h120 t2hd">教育数字化全球对话2024:人工智能赋能高等教育</view>
					<view class="df">
						<view class="f1 df f26 c666 plr10 ptb10"><uv-icon name="eye" color="#696969" size="28rpx"></uv-icon>1102</view>
						<view class="w130 bd1s brc9 c666 f24 tac br15 ptb10 plr20">立即学习</view>
					</view>
				</view>
			</view>
			<view class="bgw df ptb20 plr15" click="handlecourse(1)">
				<view class="w300 h180"><image :src="courseimg"></image></view>
				<view class="f1 ml15">
					<view class="f28 fw4 h120 t2hd">教育数字化全球对话2024:人工智能赋能高等教育</view>
					<view class="df">
						<view class="f1 df f26 c666 plr10 ptb10"><uv-icon name="eye" color="#696969" size="28rpx"></uv-icon>1102</view>
						<view class="w130 bd1s brc9 c666 f24 tac br15 ptb10 plr20">立即学习</view>
					</view>
				</view>
			</view>	
		</view>
		<view class="ver c999 mt10 mb30">
			<view class="w200 h40">
				<image src=""></image>
			</view>
			<view class="f24">
				版权所有(©)匠徕徕
			</view>
		</view>
		<uv-tabbar :value="0" iconSize="50rpx" activeColor="#00a0e8" inactiveColor="#9ea09f" zIndex="1000">
			<uv-tabbar-item text="首页">
				<template v-slot:active-icon>
					<image class="wh50" :src="selected"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="selecte"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="课程" icon="grid"></uv-tabbar-item>
			<uv-tabbar-item text="消息" icon="chat"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected:this.util.config.host+'/static/images/homed.png',
				selecte:this.util.config.host+'/static/images/home.png',
				courseimg:this.util.config.host+"/static/images/1.jpg",
				location:{
					text:'需定位',
					lng:'',
					lat:'',
				},
				hasType:{}, 
				list: [{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					}, {
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					}, {
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				navItem:[
					{
						url:this.util.config.host+"/static/images/item1.png",
						title:"线上培训",
					},{
						url:this.util.config.host+"/static/images/item2.png",
						title:"训练营",
					},{
						url:this.util.config.host+"/static/images/item3.png",
						title:"我的课程",
					},
					{url:this.util.config.host+"/static/images/item4.png",title:"我的接单"}
				],
				adv2:{
					sc:this.util.config.host+"/static/images/sc.png",
					join:this.util.config.host+"/static/images/join.png",
					bz:this.util.config.host+"/static/images/bz.png",
				}

			}
		},
		onLoad() {
		},
		onShow(){
			console.log('page Show')
		},
		methods: {
			chooseType:function(){
				if(this.hasType.member){
					uni.navigateTo({
						url:'/pages/member/index/index'
					})
				}
				if(this.hasType.choose){
					uni.navigateTo({
						url:'/pages/user/index/index'
					})
				}
				if(this.hasType.status){
					this.choose = true;
				}else{
					this.errorTxt = '';
				}
			},
			handle(e){
				if(e == 'search'){
					uni.navigateTo({
						url:'/pages/member/index/search'
					})
				}
				if(e == 'location'){
					uni.navigateTo({
						url:'/pages/member/index/location'
					})
				}
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.swiper {
			height: 300rpx; width: 720rpx;
		}
	.swiper-item {
		display: block;border-radius: 15rpx;overflow: hidden;
		height: 300rpx;
		image{border-radius: 15rpx;}
	}
	.adv-con{
		display: flex; flex-direction: row;align-items: center;
		.adv-left{width:315rpx; height:365rpx;display: flex; align-items: end; margin-right: 10rpx;}
		.adv-right{width:395rpx;height: 371rpx; display: flex; flex-direction: column;
			.adv-top{height:192rpx;margin-bottom: 10rpx;width: 100%;}
			.adv-bottom{height:169rpx;width: 100%;}
		}
	}
	.adv{height:200rpx}
	.border{width:90%;height: 0;border-bottom: #145cfe 15rpx solid; border-radius: 0 0 15rpx 15rpx; position: absolute; bottom:0;left:5%;z-index: 1;}
	.txt{position: relative; z-index: 10;}
	.train-swiper {
		height: 432rpx;width: 720rpx;
		.swiper-item {
			display: block;border-radius: 15rpx;overflow: hidden;
			height: 432rpx;
			image{border-radius: 15rpx;}
		}
	}
</style>
